<template>
  <div class="user-page">

    <h2 class="title">账号信息</h2>

    <div class="profile-card">

      <!-- 左侧：头像 -->
      <div class="avatar-box">
        <img :src="avatarPreview" class="avatar" />

        <el-upload
          class="upload-btn"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :http-request="uploadAvatar"
        >
          <el-button size="small" type="primary">更换头像</el-button>
        </el-upload>
      </div>

      <!-- 右侧：表单信息 -->
      <div class="info-form">
        <el-form label-width="100px">

          <el-form-item label="账号">
            <el-input v-model="form.account" disabled />
          </el-form-item>

          <el-form-item label="昵称">
            <el-input v-model="form.nickname" />
          </el-form-item>

          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="手机号码">
            <el-input v-model="form.phone" placeholder="未填写" />
          </el-form-item>

          <el-form-item label="邮箱">
            <el-input v-model="form.email" placeholder="未填写" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="save">保存信息</el-button>
          </el-form-item>

        </el-form>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue"
import { getUser, saveUser } from "@/utils/auth"
import { useToast } from "@/composables/useToast"
// import { updateUserInfo, uploadAvatarToServer } from "@/api/user"

const toast = useToast()

// 当前用户信息
const user = ref(getUser())

// 表单数据（可编辑）
const form = reactive({
  account: user.value?.account,
  nickname: user.value?.nickname,
  sex: user.value?.sex,
  phone: user.value?.phone,
  email: user.value?.email,
  avatar: user.value?.avatar
})

// 头像预览
const avatarPreview = computed(() =>
  form.avatar || "/default/avatar.png"
)

// 上传前限制文件类型 & 大小
const beforeUpload = (file: File) => {
  if (!["image/png", "image/jpeg"].includes(file.type)) {
    toast.error("只能上传 PNG 或 JPG 图片")
    return false
  }
  if (file.size > 2 * 1024 * 1024) {
    toast.error("图片大小不能超过 2MB")
    return false
  }
  return true
}

// 上传头像
const uploadAvatar = async (options: any) => {
  const file = options.file

  try {
    // const url = await uploadAvatarToServer(file)

    // 更新表单和预览
    // form.avatar = url

    // 更新本地 user
    // const newUser = { ...user.value, avatar: url }
    // saveUser(newUser)
    // user.value = newUser

    toast.success("头像上传成功")
  } catch (e: any) {
    toast.error("上传失败：" + e.message)
  }
}

// 保存到后台
const save = async () => {
//   try {
//     // const resp = await updateUserInfo({ ...form })

//     if (resp.code === 200) {
//       const newUser = { ...user.value, ...form }
//       saveUser(newUser)
//       user.value = newUser

//       toast.success("保存成功")
//     } else {
//       toast.warning(resp.msg)
//     }
//   } catch (e: any) {
//     toast.error("保存失败：" + e.message)
//   }
}
</script>

<style scoped>
.user-page {
  padding: 20px;
}

.title {
  font-size: 22px;
  margin-bottom: 20px;
}

.profile-card {
  display: flex;
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  gap: 40px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.avatar-box {
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 4px solid #eee;
}

.upload-btn {
  margin-top: 10px;
}

.info-form {
  flex: 1;
}
</style>
